<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Scheduled</title>
  <link rel="icon" href="data:,">
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <style>
    html, body {
      height: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
    }
  </style>
</head>
<body style="text-align: center">
<header>
  <span>Job</span>
</header>
<main>
  <button onclick="queryJob()">queryJob</button>
  <table id="table" align="center" border="1">
    <thead>
    <tr>
      <td>class</td>
      <td>name</td>
      <td>cron</td>
      <td>initialDelay</td>
      <td>interval</td>
      <td>isDone</td>
      <td>操作</td>
    </tr>
    </thead>
    <tbody></tbody>
  </table>
</main>
<footer>&copy; Scheduled 任务管理</footer>
</body>
<script>
  async function queryJobName() {
    const response = await fetch('batch/jobName');
    const data = await response.json();
    const selectElement = document.getElementById('jobName');
    selectElement.innerHTML = '';
    data.forEach(option => {
      const optionElement = document.createElement('option');
      optionElement.value = option;
      optionElement.textContent = option;
      selectElement.appendChild(optionElement);
    });
  }

  async function queryJob() {
    const response = await fetch('scheduled/queryjob?pageNum=1&pageSize=10');
    const data = await response.json();
    const tbodyElement = document.querySelector('#table tbody');
    tbodyElement.innerHTML = '';
    data.forEach(d => {
      const row = document.createElement('tr');
      ['runnable.method.declaringClass', 'runnable.method.name', 'expression', 'initialDelay', 'interval', 'isDone'].forEach(i => {
        const cell = document.createElement('td');
        cell.textContent = i.split('.').reduce((acc, key) => acc?.[key], d);
        if ('expression' === i || 'initialDelay' === i || 'interval' === i) { // 单元格可编辑
          cell.setAttribute('contenteditable', true);
          cell.style.backgroundColor = '#f0f8ff';
        }
        row.appendChild(cell);
      });
      const cell = document.createElement('td');
      [['start', start], ['stop', stop], ['one', one]].forEach(i => {
        const button = document.createElement('button');
        button.innerHTML = i[0];
        button.onclick = i[1];
        cell.appendChild(button)
      });
      row.appendChild(cell);
      tbodyElement.appendChild(row);
    });
  }

  function start() {
    const data = Array.from(this.closest('tr').querySelectorAll('td')).map(cell => cell.textContent); // 当前行数据
    fetch(`scheduled/start?className=${data[0]}&name=${data[1]}&expression=${data[2]}&initialDelay=${data[3]}&interval=${data[4]}`).then(response => queryJob());
  }

  function stop() {
    const data = Array.from(this.closest('tr').querySelectorAll('td')).map(cell => cell.textContent);
    fetch(`scheduled/stop?className=${data[0]}&name=${data[1]}`).then(response => queryJob());
  }

  function one() {
    const data = Array.from(this.closest('tr').querySelectorAll('td')).map(cell => cell.textContent);
    fetch(`scheduled/one?className=${data[0]}&name=${data[1]}`).then(response => queryJob());
  }

  window.onload = () => queryJob();
</script>
</html>